<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="1" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
        </Row>
        <i-table size="default"   border stripe  :columns="format" :data="show_list" height="760">
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="error" style="margin-bottom: 5px "  @click="del_xx(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>
<script>

import { get_es_index_list } from  '@/api'
import { post } from '@/api/http'
import { show_simple_page } from '@/common/util' 


export default {
    data() {
        return {
            format: [
                {
                    title: '名字',key: 'index'
                },
                {
                    title: '健康',key: 'health',
                    align: 'center',
                    render:(h,params) => {
                        if(params.row.health=='green'){
                            return h('span',{
                                style: {
                                    color: '#19be6b',
                                }
                            },params.row.health)
                        }else if (params.row.health=='yellow'){
                            return h('span',{
                                style: {
                                    color: '#ff9900'
                                }
                            },params.row.health)
                        }else if (params.row.health=='red'){
                            return h('span',{
                                style: {
                                    color: '#ed4014'
                                }
                            },params.row.health)
                        }else {
                            return h('span',{},params.row.health)
                        }
                    }
                },

                // {
                //     title: '状态',key: 'status',
                // },
                // {
                //     title: 'uuid',key: 'uuid'
                // },
                {
                    title: '主分片数量',key: 'pri'
                },
                {
                    title: '副本数',key: 'rep',
                },

                {
                    title: '文档数量',key: 'docs_count',
                },
                {
                    title: '文档删除',key: 'docs_delete'
                },
                {
                    title: '占用磁盘大小',key: 'store_size',
                },
                {
                    title: '主分片大小',key: 'pri_store_size'
                },
                {
                    title: '操作',slot: 'action',width: 100,align: 'center'
                }
            ],
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 50,
        }
    },
    methods: {
		btn_refresh(){
            this.refresh()
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            let cluster = localStorage.getItem('currentEsCluster')
            let headers = {"cluster_name": cluster }
            post(get_es_index_list,undefined,headers).then(response =>{
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>